<template>
  <div
    class="recycle-scroller-demo"
  >
    <div class="toolbar" style="height:300px;">
      
    </div>

    <div
      v-if="renderScroller"
      v-show="showScroller"
      class="content"
    >
        <RecycleScroller
          ref="scroller"
          class="scroller"
          :items="items"
          :buffer="buffer"
          :item-size="50"
          :page-mode="pageMode"
          key-field="index"
        >
          <template v-slot="props">
              <div class="item">
                {{ props.index }} -  {{ props.item.name }} 
              </div>
          </template>
        </RecycleScroller>
    </div>
  </div>
</template>

<script>

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

var items = [] ;
        for(var i=0 ; i<1000; i++){
            items.push({
                index: i ,
                name: 'zhangsan '+i ,
                height: 50
            })
        }
        this.items = items

export default {
  components:{
      RecycleScroller
  },
  data: () => ({
    items: items,
    count: 10000,
    renderScroller: true,
    showScroller: true,
    scopedSlots: false,
    buffer: 20,
    poolSize: 2000,
    enableLetters: true,
    pageMode: false,
    pageModeFullPage: true,
  }),
  computed: {
  },
  methods: {
    generateItems () {
        

    },
    onUpdate (startIndex, endIndex) {
      
    },
    onVisible () {
      console.log('visible')
    },
    onHidden () {
      console.log('hidden')
    }
    
  }
}
</script>

<style scoped>

.content {
  height:500px;
  border: solid 1px #42b983;
  position: relative;
}
.scroller {
  /* overflow-y: auto; */
  width: 100%;
  height: 100%;
}
/* .item {
    height:50px;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
} */

</style>